<template>
  <div class="app-container">
    <!--返回上一步-->
    <div class="back-bar-box mb-30">
      <div class="btn-back" @click="$router.go(-1)"><i class="el-icon-back"></i> 返回</div>
      <div class="line"></div>
      <div class="name">{{$route.name}}</div>
    </div>


    <div class="j-b-flex mb-20">
      <div>
        <el-button type="danger" size="small" @click="batchDel()">删除</el-button>
      </div>
      <div class="d-flex">
        <el-input v-model="searchObj.memberId" placeholder="学员id" style="margin-right: 10px;width: 150px"/>

        <el-select v-model="searchObj.targetId" clearable placeholder="课程id">
          <el-option
            v-for="item in courseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-date-picker
          class="ml-5"
          v-model="times"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

        <el-button class="ml-5" type="default" size="small" @click="resetData()">清空</el-button>
        <el-button type="primary" size="small" icon="el-icon-search" @click="getList()">筛选</el-button>

      </div>
    </div>

    <el-table
      :data="list"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="用户">
        <template slot-scope="scope">
          <div class="d-flex">
            <div><img :src="scope.row.avatar" class="user-avatar"></div>
            <div class="ml-4">
              <div class="font-medium font-sans">{{scope.row.nickname}}</div>
              <div class="email font-sans">{{scope.row.mobile || scope.row.email}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="课程"
        width="200">
        <template slot-scope="scope">
          <div class="text-over" style="height: 20px;">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="gmtCreate"
        label="创建时间">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="searchObj.pageNum"
      :page-size="searchObj.pageSize"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        total: 0 // 总记录数
        ,times:[]
        , searchObj: {
          memberId: '',
          targetId: '',
          targetType: 1,
          begin: '',
          end: '',
          pageNum: 1 // 页码
          , pageSize: 10 // 每页记录数
        },
        courseOptions: [],
        list: [],
        ids: []
      }
    }, created() {
      this.getList()
    }, methods: {
      getList() {
        this.searchObj.begin =this.times[0]
        this.searchObj.end =this.times[1]
        this.searchObj.targetType=this.$route.params.id
        this.api({
          url: `/comment/getList`,
          method: "post",
          data: this.searchObj
        }).then(resp => {
          this.total = resp.totalCount
          this.list = resp.list
        })
      },
      resetData() {
        this.times =[]
        this.searchObj = {}
      },
      handleSelectionChange(val) {
        this.ids = val.map(x=>x.id);
        // console.log(this.ids)
      },
      batchDel(){
        if(!this.ids || this.ids.length<=0){
          this.$message.warning("请选择记录")
          return false
        }
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }). this.api({
          url:`/comment/batchDel`,
          method:`post`,
          data:this.ids
        }).then(result => {
          this.$message.success("删除成功")
          this.getList()
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message.info('已取消删除')
          } else {
            this.$message.error('删除失败')
          }
        })

      }

    }
  }
</script>
